Kali ini saya akan membagikan sedikit tutorial untuk membuat select otomatis yang mereload dari database. Select option seperti ini biasanya sangat berguna bagi sistem informasi yang memiliki banyak data. Tentu jika menampilkan langsung secara keseluruhan di tag combo box (select) sangat berpotensi membutuhkan reload data yang lama. Oleh karena itu untuk memaksimalkan select pada web atau sistem informasi yang kita buat, diperlukan suatu select yang dapat terkoneksi secara server side agar membutuhkan waktu yang lebih singkat dalam load data.
Select seperti ini biasa disebut dengan select data menggunakan json atau server side. Atau dengan kata lain juga dapat disebut dengan autocomplete select dengan json.
Berikut adalah script untuk load data dengan menggunakan select. Sebelum itu anda dapat melihat demo di bawah ini :
Caranya adalah sebagai berikut :
Langkah 1 – Membuat Database
Buatlah database bernama “tutorial”, lalu buatlah tabel “users” dengan query sql berikut ini :
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `email` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `users` (`id`, `username`, `name`, `email`) VALUES (1, 'agus', 'Agus Pramudya', 'agus@sistemit.com'), (2, 'hendra', 'Hendra Agustian', 'hendra@sistemit.com'), (3, 'bambang', 'Medina Kuala', 'medina@sistemit.com'), (4, 'sunio', 'Sunio', 'sunio@sistemit.com'), (5, 'marioke', 'Mario Eka', 'mario@sistemit.com'), (6, 'arijits', 'Arijit Eka', 'arijits@sistemit.com'), (7, 'juminten', 'Juminten Salamah', 'juminten@sistemit.com');
Langkah 2 – Membuat File Konfigurasi Database
Selanjutnya adalah membuat file bernama “config.php”
<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "tutorial_select"; // nama_database ( bisa diganti dengan yang lain )
// Create connection
try{
$conn = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
die('Unable to connect with the database');
}
?>
Langkah 3 – Membuat File AJAX PHP
Langkah ke-tiga buat file bernama ajaxfile.php
<?php
include 'config.php';
// Number of records fetch
$numberofrecords = 10;
if(!isset($_POST['searchTerm'])){
// Fetch records
$stmt = $conn->prepare("SELECT * FROM users ORDER BY name LIMIT :limit");
$stmt->bindValue(':limit', (int)$numberofrecords, PDO::PARAM_INT);
$stmt->execute();
$usersList = $stmt->fetchAll();
}else{
$search = $_POST['searchTerm'];// Search text
// Fetch records
$stmt = $conn->prepare("SELECT * FROM users WHERE name like :name ORDER BY name LIMIT :limit");
$stmt->bindValue(':name', '%'.$search.'%', PDO::PARAM_STR);
$stmt->bindValue(':limit', (int)$numberofrecords, PDO::PARAM_INT);
$stmt->execute();
$usersList = $stmt->fetchAll();
}
$response = array();
// Read Data
foreach($usersList as $user){
$response[] = array(
"id" => $user['id'], //for value
"text" => $user['name'],
"html" => "<div style='color:black'>".$user['name']."</div><div><small><i>".$user['email']."</i></small></div>",
"title" => $user['name']
);
}
echo json_encode($response);
exit();
Langkah 4 – Membuat File index.html
Buatlah file index.html dengan kode sebagai berikut:
Kita akan menggunakan script library Select2
Silahkan Download Disini :
File jquery.min.js
select2.min.css
select2.min.js
<!doctype html>
<html>
<head>
<title>Select Dengan Load Data JSON Ajax Jquery</title>
<meta charset="UTF-8">
<!-- jQuery (SESUAIKAN DENGAN LETAK FILE FOLDER)-->
<script src='jquery.min.js' type='text/javascript'></script>
<!-- select2 css (SESUAIKAN DENGAN LETAK FILE FOLDER)-->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>
<!-- select2 script (SESUAIKAN DENGAN LETAK FILE FOLDER) -->
<script src='select2/dist/js/select2.min.js'></script>
</head>
<body>
<form action='action.php' method='post'>
<select id='selUser' required name='selUser' class='form-select' style='width: 500px;'>
<option value=''>- Ketik Username - Contoh : ag</option>
</select><br>
<input type="submit" value="action">
</form>
<script>
$(document).ready(function(){
$("#selUser").select2({
ajax: {
url: "ajaxfile.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: false,
},
minimumInputLength: 2,
escapeMarkup: function(markup) {
return markup;
},
templateResult: function(data) {
return data.html;
},
templateSelection: function(data) {
return data.text;
}
});
});
</script>
</body>
</html>
Langkah 5 – Membuat File Aksi
Buatlah file bernama “action.php”. Letakkan di folder yang sama
<?php echo "Value Dari Select Adalah : <b>".$_POST['selUser']."</b><br><a href='./'>Kembali</a>"; ?>
Silahkan Download Disini Untuk SOURCE CODE
Semoga Bermanfaat.
